<template>
    <div class="common questionBank">
        <innerCommon 
            :location="location"
        >
        <template slot="left">
            <span>题库列表</span>
            <majorModule
                @submitSearch="submitSearch"
            ></majorModule>
        </template>
        <div slot="right">
            <a-button type="primary" @click="openQuestionBox()">创建题库</a-button>
        </div>
        <div slot="table" class="tableWrap">
            <a-table 
                size="middle"
                :columns="columns" 
                :data-source="list" 
                :pagination="pagination"
                :rowKey="record=>record.id"
                @change="changePage"
                :locale="{'emptyText': '暂无数据'}"
                bordered>
                <div slot="action" slot-scope="index,record" class="tableAction">
                    <span @click="changeQuestionAdd(record.id,record.title)">维护题目</span>
                    <confirmBox
                        @handleOk="deleteItem(record)"
                        :typeName="'删除'"
                        :noticeInfo="record.title"
                        :noticeType="'题库'"
                    ></confirmBox>
                    <span @click="editQuestionItem(record)">修改</span>
                </div>
                <div slot="major" slot-scope="index,record">
                    {{record.majors[0].name}}
                </div>
                <div slot="module" slot-scope="index,record">
                    {{record.majors[1].name}}
                </div>
                <div slot="operator" slot-scope="index,record">
                    {{record.operator.name}}
                </div>
                <div slot="questionType" slot-scope="index,record">
                    <a-tag>
                        单选{{record.singleNum}}
                    </a-tag>
                    <a-tag>
                        多选{{record.multiNum}}
                    </a-tag>
                    <a-tag>
                        判断{{record.judgeNum}}
                    </a-tag>
                </div>
            </a-table>
        </div>
        </innerCommon>
        <a-modal
            :title="isAddQuestion==0?'新增':'修改'+'题库'"
            :visible="questionModal"
            @ok="addQuestion()"
            @cancel="questionModal=false"
            :destroyOnClose='true'
            :width="600"
            okText="确认"
            cancelText='取消'
            class="questionModal"
            >
            <eform
                :formData="formData"
                class="form"
                ref="form"
                :fields="fields"
            >
                <div slot="major">
                    <a-select 
                        allow-clear 
                        placeholder="请选择专业"
                        :notFoundContent="'暂无数据'"
                        :disabled="isUnclick"
                        @change="handleMajor"
                        v-decorator="['major',{rules: [{ required: true, message: '请选择专业' }]}]"
                        >
                        <a-select-option :value="item.id" v-for="(item,index) in majorList" :key="index">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </div>
                <div slot="module">
                    <a-select 
                        allow-clear 
                        placeholder="请选择模块"
                        :disabled="isUnclick"
                        :notFoundContent="'暂无数据'"
                        v-decorator="['module',{rules: [{ required: true, message: '请选择模块' }]}]"
                        >
                        <a-select-option :value="item.id" v-for="(item,index) in moduleList" :key="index">
                            {{item.name}}
                        </a-select-option>
                    </a-select>
                </div>
            </eform>
        </a-modal>
    </div>
</template>
<script>
const columns=[
    {
        title: '序号',
        dataIndex: 'index',
        width:70
    },{
        title: '题库名称',
        dataIndex: 'title',
    },{
        title: '所属专业',
        scopedSlots: { customRender: 'major' },
    },{
        title: '所属教学模块',
        scopedSlots: { customRender: 'module' },
    },{
        title: '题目类型和数量',
        scopedSlots: { customRender: 'questionType' },
        width:220
    },{
        title: '题目总数',
        dataIndex: 'questionNum',
        width:100
    },{
        title: '操作者',
        scopedSlots: { customRender: 'operator' },
        width:100
    },{
        title: '创建时间',
        dataIndex: 'createTime',
        width:150
    },{
        title: '操作',
        scopedSlots: { customRender: 'action' },
        width:200
    }
]
import confirmBox from "@/components/common/confirmBox"
import innerCommon from "@/components/common/innerCommon"
import majorModule from "@/components/common/majorModule"
import eform from "@/components/common/form"
import {getQuestionList,getMajorListApi,addQuestionItemApi,deleteQuestionItemApi,updateQuestionItemApi} from "@/request/api"
export default {
    name:'questionBank',
    components:{innerCommon,confirmBox,majorModule,eform},
    watch:{
        searchValue:function(val){
            this.searchValue=val.trim()
        }
    },
    created(){
        this.location=[{
            name:"教学课堂管理",
            path:''
        },{
            name:"题库",
            path:'/questionBank'
        }]
        this.init()
    },
    data(){
        const formData=[
            {
                label:"题库名称",
                prop:"title",
                placeholder:'请输入题库名称',
                rules:[{required:true,message:'请输入题库名称'}],
            },{
                label:"专业方向",
                scopedSlots: { customRender: 'major'},
            },{
                label:"教学模块",
                scopedSlots: { customRender: 'module'},
            }
        ]
        return{
            formData,
            location:[],
            columns,
            list:[],
            searchInfo:{
                page:1,
                pageSize:10,
                keyword:'',
                majorId:[]
            },
            pagination:{pageSize:10,total:0,current:1},
            searchValue:'',
            isAddQuestion:0,//0是新增 1是修改
            questionModal:false,
            fields:null,
            majorList:[],
            moduleList:[],
            questionItemId:null,
            isUnclick:false,
        }
    },
    methods:{
        init(){
            this.getToken(getQuestionList,this.searchInfo,res=>{
                this.dealData(res.data.rows,res.data.count)
            })
            this.getToken(getMajorListApi,{},res=>{
                this.majorList=res.data
            })
        },
        dealData(list,total){
            this.list=list.map((item,index)=>({...item,'index':(this.searchInfo.page-1)*10+index+1}))
            this.pagination.total=total
        },
        submitSearch(data){
            this.searchInfo.keyword=data.keyword
            if(data.moduleId&&data.moduleId!=0){
                this.searchInfo.majorId=data.moduleId
            }else{
                this.searchInfo.majorId=data.majorId==0?null:data.majorId
            }
            this.init()
        },
        
        changePage(data){
            this.searchInfo.page=data.current
            this.init()
        },
        openQuestionBox(){
            this.isUnclick=false
            this.questionModal=true;
            this.isAddQuestion=0
            this.fields=null
        },
        addQuestion(){
            this.$refs.form.form.validateFields().then(res=>{
                let api
                let formData={'title':res.title,'majorId':[res.major,res.module]}
                if(this.isAddQuestion==0){
                    api=addQuestionItemApi
                }else{
                    api=updateQuestionItemApi
                    formData={...formData,'questionLibId':this.questionItemId}
                }
                this.getToken(api,formData,data=>{
                    this.$message.success(data.message)
                    this.init()
                    this.questionModal=false
                    if(this.isAddQuestion==0){
                    this.$confirm({
                        title: '是否立即添加题目?',
                        cancelText:"否",
                        okText:"是",
                        onOk:()=>{
                            this.changeQuestionAdd(data.data.questionLibId,res.title)
                        },
                        onCancel() {
                        },
                    });
                    }
                })
            })
        },
        changeQuestionAdd(id,title){
            this.$router.push({path:'/questionAdd',query:{id,title:JSON.stringify(title)}})
        },
        handleMajor(data){
            this.moduleList=this.majorList.filter(item=>item.id==data)[0].children
            this.$refs.form.form.resetFields(['module'])
        },
        deleteItem(data){
            this.getToken(deleteQuestionItemApi,{'questionLibId':data.id},res=>{
                this.$message.success(res.message)
                this.questionModal=false
                this.init()
            })
        },
        editQuestionItem(data){
            this.isUnclick=true
            this.questionItemId=data.id
            this.isAddQuestion=1
            this.questionModal=true;
            this.fields=data
            this.fields.major=data.majors[0].id
            this.moduleList=this.majorList.filter(item=>item.id==this.fields.major)[0].children
            this.fields.module=data.majors[1].id
        }
    }
}
</script>
<style lang="stylus">
.questionModal
    #eform
        .ant-col-6
            width:25%
</style>